<template>

	<view class="container">

		<!-- 顶部筛选按钮 -->
		<view class="filter-buttons" style="	box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 18rpx;">
			<view v-for="(filter, index) in filters" :key="index" class="filter-btn"
				:class="{active: activeFilter === index}" @tap="setActiveFilter(index)">
				<text class="filter-icon">{{filter.icon}}</text>
				<text class="filter-text">{{filter.name}}</text>
			</view>
		</view>

		<!-- 搜索和添加区域   -->
		<view class="search-add-bar" v-if="activeFilter ==0">
			<view class="search-box">
				<u--input placeholder="客户名/手机号" v-model="searchValue" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" clearable></u--input>
			</view>
			<view class="add-btn" @tap="searchContact">
				<u-icon name="search" color="#fff" size=""></u-icon>
			</view>
		</view>

		<!-- 客户关系 -->
		<view class="" v-else-if="activeFilter == 1">
			<scroll-view class="filter-scroll" scroll-x="true" show-scrollbar="false">
				<view class="filter-buttons marginNo">
					<u-button v-for="(item, index) in filterBiaoqianList" :key="index" hairline
						:class="['filter-btns', { active: activeFilterFirst === index }]" style="font-size: 28rpx;"
						@click="handleFilterClickFirst(item,index)">
						{{ item }}
					</u-button>
				</view>
			</scroll-view>
		</view>

		<!-- 产品筛选 -->
		<view class="" v-else-if="activeFilter ==2">
			<scroll-view class="filter-scroll" scroll-x="true" show-scrollbar="false">
				<view class="filter-buttons marginNo">
					<u-button v-for="(item, index) in filterListOne" :key="index"
						:class="['filter-btns', { active: activeFilterOne === item.id }]" style="font-size: 28rpx;"
						@click="handleFilterClickOne(item)" size="mini">
						{{ item.value }}
					</u-button>

				</view>
			</scroll-view>
			<scroll-view class="filter-scroll" scroll-x="true" show-scrollbar="false">
				<view class="filter-buttons marginNo">
					<u-button v-for="(items, indexs) in filterListTwo" :key="indexs"
						:class="['filter-btns', { active: activeFilterTwo === items.id }]"
						@click="handleFilterClickTwo(items)" size="mini">
						{{ items.value}}
					</u-button>
				</view>
			</scroll-view>
		</view>


		<!-- 标签页 -->
		<u-tabs style="background-color: white;" :list="tabs" :current="activeTab" @change="setActiveTab"
			active-color="#2979ff" inactive-color="#666" bg-color="#fff" :is-scroll="true"></u-tabs>

		<!-- 正文内容区域 -->
		<view class="content-container">
			<!-- 联系人列表 -->
			<view class="contact-list" v-if="activeTab === 0">
				<!-- 空状态 -->
				<view class="empty-state" v-if="pageTotal == 0">
					<u-empty text="暂无联系人数据" mode="list"></u-empty>
				</view>
				<!-- 列表数据 -->
				<u-list @scrolltolower="scrolltolower" height="100%" v-else>

					<u-list-item v-for="(contact, index) in filteredContacts" :key="index" class="borderBottom">
						<view class="contact-item" @click="viewContact(contact)">
							<u--image :showLoading="true" :src="contact.avatar" shape="circle" width="100rpx"
								height="100rpx"></u--image>
							<view class="contact-info">
								<text class="contact-name">{{contact.cname}}</text>
								<text class="contact-phone">{{contact.mobile}}</text>
								<!-- <view class="contact-tags">
							<text class="tag" v-for="(tag, tagIndex) in contact.tags" :key="tagIndex">
								{{tag}}
							</text>
						</view> -->
							</view>
							<view class="contact-actions">
								<view class="action-btn chat-btn" @tap.stop="handleOpenGroupChat(contact,1)">
									<u-icon name="chat" color="#fff" size="35"></u-icon>
								</view>
								<view class="action-btn call-btn" @tap.stop="callTo(contact)">
									<u-icon name="phone" color="#1890ff" size="35"></u-icon>
								</view>
							</view>
						</view>
					</u-list-item>

				</u-list>
			</view>
			<!-- 客户群内容 -->
			<view class="contact-list" v-if="activeTab === 1">
				<!-- <u-empty text="客户群功能开发中" mode="list"></u-empty> -->
				<!-- 空状态 -->
				<view class="empty-state" v-if="qunlist.length == 0">
					<u-empty text="暂无客户群数据" mode="list"></u-empty>
				</view>
				<!-- 客户群内容 -->
				<view class="contact-item" v-else v-for="(contact, index) in qunlist" :key="index"
					@tap="viewContact(contact)">
					<u--image :showLoading="true" :src="WxAvatar.url" shape="circle" width="100rpx"
						height="100rpx"></u--image>
					<view class="contact-info">
						<text class="contact-name" v-if="contact.chatName">{{contact.chatName}}</text>
						<text class="contact-name" v-else>{{contact.groupChat.name}}</text>
						<text class="contact-phone">{{contact.mobile}}</text>

					</view>
					<view class="contact-actions">
						<!-- 聊天页面 -->
						<view class="action-btn chat-btn" @tap.stop="handleOpenGroupChat(contact,2)">
							<u-icon name="chat" color="#fff" size="35"></u-icon>
						</view>
						<!-- 转让 -->
						<view class="action-btn call-btn" @tap.stop="shareChat(contact)">
							<u-icon name="share" color="#1890ff" size="35"></u-icon>
						</view>
					</view>
				</view>

			</view>
			<view class="contact-list" v-if="activeTab === 2">
				<collectTable :chartPage="activeFilter"></collectTable>
				<!-- <view class="empty-state">
					<u-empty text="暂无数据" mode="list"></u-empty>
				</view> -->
			</view>
			<!-- 转让按钮~操作窗口 -->
			<u-popup @close="closeShare" :show="showShare" :closeable="closeable" :closeOnClickOverlay="closeable"
				mode="center" :round="10">
				<view class="popnoxssty">
					<view class="poptitle">
						转让
					</view>

					<scroll-view>
						<view style="height: 35vh;" v-if="guanliList.length == 0">
							<div style="height: 100%; display: flex; align-items: center;justify-content: center;">
								<u-loading-icon textSize="20"></u-loading-icon>
							</div>
						</view>
						<u-list v-else style="height: 35vh;display: flex; align-items: center;justify-content: center;">
							<u-list-item v-for="(item, index) in guanliList" :key="index">
								<u-cell :title="`${item.userName}`" @click="enterCell(item)">
									<u-avatar slot="icon" shape="square" size="35"
										customStyle="margin: -3px 5px -3px 0"></u-avatar>
								</u-cell>
							</u-list-item>
						</u-list>
					</scroll-view>
				</view>
			</u-popup>
			<!-- 确认转让 模态框 -->
			<u-modal :show="enterShowShare" :title="shareTitle" :content='shareContent.content' showConfirmButton
				showCancelButton buttonReverse @confirm="enterShareconfirm" @cancel="closeSharecancel"></u-modal>
		</view>
		<tabbar :value="1"></tabbar>
	</view>

</template>
<script>
	import api from "@/utils/api";
	import request from "@/utils/request.js";
	import tabbar from "@/components/tabbar.vue";
	import * as ww from '@wecom/jssdk';
	import wx from "weixin-js-sdk";
	import chart1Vue from "./components/chart1.vue";
	import chart2Vue from "./components/chart2.vue";
	import collectTable from "./components/collectTable.vue";
	// import {
	// 	WxWorkDiagnose
	// } from "@/utils/wx-diagnose.js"
	import {
		initWxWork,
		openChat
	} from "@/utils/wxWork.js";
	// import {
	// 	contactPointMap
	// } from "XrFrame/physics/ContactPoint";

	import wechatWorkSdkManager from '@/utils/enterpriseChatManager.js';

	export default {
		components: {
			tabbar,
			chart1Vue,
			chart2Vue,
			collectTable
		},
		data() {
			return {
				qunchatId: '',
				WxAvatar: {
					url: '../../static/wxtx.png',
				},
				shareTitle: '转让',
				shareContent: {
					id: '',
					content: '转让'
				},
				showShare: false, //分享转让 弹窗显隐
				enterShowShare: false, //转让确认框 显藏
				guanliList: [], //管理人员 列表（转让窗口）
				guanliUserID: '', //转让功能 暂存Id
				closeable: true,
				searchValue: '', //搜索框内容
				biaoqian: '普通',
				avatar: '头像',
				mobile: "",
				pageTotal: 0, //页数总数 （
				cname: "",
				activeFilter: 0,
				activeFilterFirst: 0,
				activeFilterOne: 0,
				activeFilterTwo: 0,
				activeTab: 0,
				searchKeyword: '',
				filters: [{
						name: '全部',
						icon: '👥',
						id: 1,
					},
					{
						name: '客户关系',
						icon: '📊',
						id: 2,
					},
					{
						name: '产品',
						icon: '💰',
						id: 3,

					},
					{
						name: '活动',
						icon: '💬',
						id: 4,
					}
				],
				tabs: [{
						name: '联系人'
					},
					{
						name: '客户群',
						disabled: false,
					},
					{
						name: '汇总统计'
					}
				],
				activeFilter: 0, // 当前选中的筛选项索引
				filterBiaoqianList: ['普通', '重要', '核心'], //客户关系
				filterListOne: [{ //产品分类``````` 业务来源1
						id: 1,
						value: '存款',
						children: [{
							id: 10,
							value: '个人储蓄存款'
						}, {
							id: 11,
							value: '对公存款'
						}, {
							id: 12,
							value: '其他存款'
						}, ]
					},
					{
						id: 2,
						value: '贷款',
						children: [{
							id: 21,
							value: '小微企业抵押贷款'
						}, {
							id: 22,
							value: '农户经营贷款'
						}, {
							id: 23,
							value: '快贷'
						}, {
							id: 24,
							value: '房贷'
						}, {
							id: 25,
							value: '项目贷款'
						}, {
							id: 26,
							value: '公司信贷'
						}]
					},
					{
						id: 3,
						value: '支付结算',
						children: [{
								id: 31,
								value: '传统结算'
							}, {
								id: 32,
								value: '电子支付'
							}, {
								id: 33,
								value: '收单'
							},
							{
								id: 34,
								value: '对公结算'
							}
						]
					},
					{
						id: 4,
						value: '代理业务',
						children: [{
							id: 41,
							value: '财政类代理'
						}, {
							id: 42,
							value: '保险类代理'
						}, {
							id: 43,
							value: '其他代理'
						}]
					},
					{
						id: 5,
						value: '中间及扩展业务',
						children: [{
							id: 51,
							value: '银行卡增值服务'
						}, {
							id: 52,
							value: '理财服务'
						}, {
							id: 53,
							value: '信用服务'
						}, {
							id: 54,
							value: '贵金属'
						}]
					},
				],
				filterListTwo: [], //产品  业务来源2  二级菜单筛选按钮组
				contacts: [],
				contactList: [], // 联系人列表数据
				qunlist: [], //客户群列表数据
				page: 1, // 当前页码
				pageSize: 15, // 每页数量
				total: 0, // 群总数据量
				loading: false, // 是否正在加载
				listHeight: 'calc(100vh - 100px)', // 列表高度
				loadStatus: 'loadmore', // 加载状态
				loadText: {
					loadmore: '上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				corpId: '您的企业CorpID', // 从企业微信管理后台获取
				agentId: '您的应用AgentID', // 从企业微信管理后台获取
				sdkInitialized: false
			}
		},

		computed: {
			filteredContacts() {
				let result = [...this.contacts];

				// if (this.searchKeyword) {
				// 	const keyword = this.searchKeyword.toLowerCase();
				// 	result = result.filter(contact =>
				// 		contact.name.toLowerCase().includes(keyword) ||
				// 		contact.phone.includes(keyword)
				// 	);
				// }

				// if (this.activeFilter > 0) {
				// 	result = result.filter((_, index) => index % (this.activeFilter + 1) === 0);
				// }

				return result;
			}
		},
		watch: {
			'activeTab': function(newVal, oldVal) {
				// 处理变化
				console.log(newVal, "新变化");
				if (newVal == 0) {
					this.getInfoList();
				} else if (newVal == 1) {
					this.getqunList();
				}
			}
		},
		onShow() {
			if (this.activeTab == 1) {
				this.getqunList();
			} else if (this.activeTab == 0) {
				this.getInfoList();
			}
		},
		created() {
			// this.getInfoList();
			// this.getqunList();
			// this.getChuShiHua(); //初始化
		},
		methods: {
			// 打开会话
			async handleOpenGroupChat(contact, index) {
				let param = {}
				if (index == 1) {
					param = {
						externalUserIds: [`${contact.externalUserid}`],
					}
				} else if (index == 2) {
					param = {
						chatId: contact.groupChat.chatId
					}
				}
				try {
					const result = await wechatWorkSdkManager.openEnterpriseChat(param);
				} catch (error) {
					console.error('打开群聊失败:', error);
					uni.showToast({
						title:'打开群聊失败',
						icon:"none"
					})
				}
			},

			// 初始化
			async getChuShiHua() {
				try {
					// 指定需要使用的接口（按需添加）
					const jsApiList = ['getCurUserInfo', 'scanQRCode', 'chooseImage']
					await initWxWork(jsApiList)
					// await WxWorkDiagnose()//jdk修复工具（控制台看结果）
					console.log("初始化成功");
				} catch (err) {
					console.log('初始化失败');
				}
			},
			// 获取用户列表信息
			getInfoList() {
				let data = {
					pageSize: this.pageSize,
					pageNum: 1,
					mobile: this.mobile,
					cname: this.cname,
				}
				// biaoqian
				if (this.activeFilter == 1) {
					data['biaoqian'] = this.biaoqian;
				} else if (this.activeFilter == 2) {
					data['yewuSource'] = this.activeFilterOne;
					data['yewuSource2'] = this.activeFilterTwo;
				}

				request(api.infoList, 'GET', data)
					// request('http://192.168.1.88:8000/wx/yingyong/cinfo/list', 'GET')
					.then(res => {
						// console.log(res);
						if (res.code == 200) {
							this.contacts = res.rows
							this.pageTotal = res.total
							// 清空搜索框变量数据
							this.mobile = '';
							this.cname = ''
						}

					})
					.catch(response => {

					})
			},
			// 获取群列表信息
			getqunList(data) {
				let next_cursor = data;
				request(api.qunList, 'GET', data)
					// request('http://192.168.1.88:8000/wx/yingyong/qun/qunlist', 'GET', next_cursor)
					.then(res => {
						// console.log(res);
						if (res.code == 200) {
							this.qunlist = res.data.group_chat_list;
							if (res.data.next_cursor) {
								this.getqunList(res.data.next_cursor);
							}
						}
					})
					.catch(response => {

					})
			},
			// 获取转让人员的列表
			getGuanliList() {
				request(api.guanli, "GET")
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							this.guanliList = res.data;
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			setActiveFilter(index) {
				if (index != 3) {
					this.activeFilter = index;
					this.getInfoList()
					// 顶部四个筛选，隐藏客户群页面
					if (index == 0) {
						this.tabs[1].disabled = false; //点击全部筛选才可 操作客户群页面
					} else {
						this.tabs[1].disabled = true;
						// this.activeTab = 0;
					}
					this.pageSize = 15; //初始化 页数
				}
				// uni.showToast({
				// 	title: `筛选: ${this.filters[index].name}`,
				// 	icon: 'none'
				// });
			},

			setActiveTab(data) {
				this.activeTab = data.index;
				// console.log(index);
			},
			handleSearch() {
				// 实际项目中可以添加防抖
				// console.log('搜索:', this.searchKeyword);
			},
			// 搜索按钮
			searchContact(e) {
				// uni.navigateTo({
				// 	url: '/pages/contact/add'
				// });
				this.activeTab = 0;
				this.pageSize = 15;
				console.log(this.searchValue, '搜索框', /^\d+$/.test(this.searchValue));
				let isNum = /^\d+$/.test(this.searchValue);
				if (isNum) {
					this.mobile = this.searchValue;
				} else {
					this.cname = this.searchValue;
				}
				this.getInfoList();
			},

			viewContact(contact) {
				console.log(contact);
				// 跳转详情
				let id = ""
				if (this.activeTab == 0) {
					id = contact.id;
					uni.navigateTo({
						url: `/pages/management/manageDetail?data=${id}&type=${this.activeTab}`
					});
				} else if (this.activeTab == 1) {
					id = contact.chatId ? contact.chatId : contact.groupChat.chatId;
					uni.navigateTo({
						url: `/pages/management/manageDetail?data=${id}&type=${this.activeTab}`
					});
				}

			},
			handleFilterClickFirst(item, index) {
				this.activeFilterFirst = index;
				this.biaoqian = item;
				this.getInfoList()
				// activeFilter
			},
			handleFilterClickOne(item) {
				this.activeFilterOne = item.id
				this.filterListTwo = item.children;
				// this.getInfoList()
				// 触发筛选事件，传递当前选中的筛选项
			},
			handleFilterClickTwo(item) {
				this.activeFilterTwo = item.id;
				console.log(item.id);
				this.getInfoList()
				// 这里可以添加实际的筛选逻辑
				// this.filterData(this.filterList[index])
			},


			// 筛选数据方法
			filterData(filterType) {
				console.log('执行筛选:', filterType)
				// 实际项目中这里调用API或过滤本地数据
				// 例如：
				// this.$http.get('/api/customers', { params: { type: filterType } })
				//   .then(res => {
				//     this.customerList = res.data
				//   })

			},
			async chatWith(contact, index) {
				console.log(contact, index, "contact列表数据 ");

				if (index == 1) {
					// 单聊：外部联系人
					wx.invoke('openEnterpriseChat', {
						externalUserIds: contact.externalUserid,
						groupName: ''
					}, (res) => {
						console.log('单聊天调用结果:', res);
					});
				} else if (index == 2) {
					// 群聊：使用chatId
					console.log(contact.chatId, contact.chatName);
					wx.invoke("openExistedChatWithMsg", {
						chatId: contact.chatId,
						msg: {
							msgtype: "link",
							link: {
								title: "title1",
								desc: "desc1",
								url: "link1"
							}
						}
					}, function(res) {
						console.log(res, "openExistedChatWithMsg打开群聊");
					});
					// wx.invoke('openEnterpriseChat', {
					// 	chatId: contact.chatId,
					// 	externalUserIds:[],
					// 	type:1,
					// }, res => {
					// 	console.log(res, "openEnterpriseChat打开群聊");
					// })
				}
			},

			callTo(contact) {
				// 打电话
				if (contact.mobile) {
					uni.makePhoneCall({
						phoneNumber: contact.mobile
					});
				}

			},
			async getContactList(ItemData) {
				this.loading = true
				this.loadStatus = 'loading'

				try {
					let data = {
						page: this.page,
						pageSize: this.pageSize
					}
					data.push(ItemData)
					const res = await request('http://192.168.1.88:8000/wx/yingyong/cinfo/list', 'GET', data)


					if (this.page === 1) {
						this.contactList = res.rows
					} else {
						this.contactList = [...this.contactList, ...res.rows]
					}

					// this.total = res.total

					// 判断是否还有更多数据
					if (this.contactList.length >= this.total) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				} catch (error) {
					console.error('获取联系人列表失败:', error)
					this.loadStatus = 'loadmore'
				} finally {
					this.loading = false
				}
			},

			// 加载更多数据
			loadMore() {
				if (this.loading || this.loadStatus === 'nomore') return

				this.page++
				// this.getContactList()
			},
			// 滚动条到最后底部的方法
			scrolltolower() {

				if (this.pageSize < this.pageTotal) {
					this.pageSize = this.pageSize + 10;
					this.getInfoList()
				}
				console.log("页数", this.pageSize);
			},

			// 下拉刷新
			onRefresh() {
				this.page = 1
				// this.getContactList()
			},
			// 以下都是 转让方法
			closeShare() {
				this.showShare = false
				// console.log('close');
			},
			shareChat(item) {
				this.qunchatId = item.chatId;
				this.getGuanliList()
				this.showShare = true
			},
			enterCell(item) {
				console.log(item, "转让给他……");
				this.shareContent.content = `确认转让给 “ ${item.userName} ”吗？`
				this.shareContent.id = item.userId;
				this.enterShowShare = true;
			},
			// 确认转让按钮
			enterShareconfirm() {
				this.zhuanchuFunc()
			},
			// 取消转让
			closeSharecancel() {
				this.enterShowShare = false;
			},
			zhuanchuFunc() {
				let data = {};
				data['chatId'] = this.qunchatId;
				data['newOwner'] = this.shareContent.id; //接受人id
				request(api.qunZhuanchu, "GET", data)
					.then(res => {
						console.log(res); //转让成功
						if (res.code == 200) {
							uni.showToast({
								title: res.msg, // 提示内容（必填）
								icon: "success", // 图标：success/error/loading/none（默认success）
								duration: 1000, // 显示时长（ms，默认1500）
								position: "top" // 位置：top/middle/bottom（默认middle）
							});
						}
						this.enterShowShare = false;
						this.showShare = false;
					})
					.catch(err => {
						console.log(err);
					})
				console.log(data, "转让成功");
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;

		// background-color: #f5f7fa;
		// min-height: 100vh;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		// background-color: #f5f5f5;
	}

	.filter-buttons {
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 10rpx;
		box-sizing: border-box;

	}

	.filter-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24rpx 10rpx;
		background: transparent;
		border-radius: 16rpx;
	}

	.filter-btn.active {
		background: #ecf5ff;
	}

	.filter-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.filter-text {
		font-size: 24rpx;
		color: #666;
	}

	.filter-btn.active .filter-text {
		color: #2979ff;
		font-weight: 500;
	}

	/* Tab栏 */
	.tabs {
		margin-top: 30rpx;
		display: flex;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.tab.active {
		color: #07c160;
		font-weight: 500;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20%;
		right: 20%;
		height: 4rpx;
		background-color: #07c160;
	}

	.search-add-bar {
		display: flex;
		margin-bottom: 12rpx;
		gap: 20rpx;
	}

	.search-box {
		flex: 1;
		// height: 88rpx;
	}

	.search-input {
		background: white;
		border-radius: 16rpx;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		// height: 70rpx;
		height: 100%;
		background: #2979ff;
		border-radius: 50%;
	}

	.content-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.contact-list {
		background: white;
		height: 100%;
		// border-radius: 24rpx;
		// overflow: hidden;
		overflow-y: auto;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.borderBottom {
		border-bottom: 1rpx solid #f0f0f0;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-direction: row;
	}

	.borderBottom:last-child {
		border-bottom: none;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: bold;
		margin-right: 24rpx;
		font-size: 40rpx;
	}

	.avatar-1 {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}

	.avatar-2 {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}

	.avatar-3 {
		background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
	}

	.contact-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.contact-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: block;
	}

	.contact-phone {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}

	.contact-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.tag {
		padding: 4rpx 12rpx;
		background: #f0f7ff;
		color: #2979ff;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.contact-actions {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chat-btn {
		background: #2979ff;
	}

	.call-btn {
		background: #e6f7ff;
	}

	.empty-state {
		// height: 100%;
		box-sizing: border-box;
		padding: 80rpx 40rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.contact-info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.phone {
		font-size: 28rpx;
		color: #999;
		margin-top: 10rpx;
	}
</style>
<style scoped>
	/* .filter-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	} */

	.filter-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.filter-buttons {
		display: inline-flex;
		/* padding: 10rpx 0; */
	}

	.filter-btns {
		width: auto !important;
		margin: 0 10rpx;
		border-radius: 8rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 24rpx;
		font-size: 26rpx;
		font-weight: 400;
		/* border: 1rpx solid #dcdfe6; */
		background-color: #ffffff;
		color: #606266;
		transition: all 0.3s;
	}

	.filter-btns.active {
		background-color: #2979ff;
		color: #ffffff;
		border-color: #2979ff;
	}

	/* 确保第一个和最后一个按钮的边距适当 */
	/* .filter-buttons .filter-btn:first-child {
		margin-left: 0;
	} */

	/* .filter-buttons .filter-btn:last-child {
		margin-right: 0;
	} */
	.marginNo {
		margin: 0;
	}

	.popnoxssty {
		width: 660rpx;
		/* padding-bottom: 60rpx; */



		.poptitle {
			text-align: center;
			margin-top: 25rpx;
		}

		.scboxs {
			margin: 20rpx 60rpx 0;
			/* margin-left: 60rpx; */
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.inpboxs {
			width: 82%;
			margin-left: 9%;
			/* border: 1px solid #999999; */
			/* display: flex; */
			/* align-items: center; */
			/* justify-content: space-between; */

			margin-top: 10rpx;

			.inpsty {
				margin-left: 20rpx;
			}

			.danwei {
				width: 100%;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}
</style>